<template>
  <div id="monthStatistics"></div>
</template>

<script>
import { monthcensus, selectmonthactive } from '../../../api/dataCenter';
export default {
  name: 'monthStatistics',
  data () {
    return {
      compData: [2643, 4523, 5721, 6377, 6877, 7011, 7675, 15393, 37689, 55678, 63473, 76080],
      monthDate: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07'],
      monthActive: [1343, 2865, 2432, 2154, 1446, 823, 1245, 8746, 25623, 28543, 34514, 34551]
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('monthStatistics'));
      // 绘制图表
      myChart.setOption({
        tooltip: { trigger: 'axis' },
        grid: {
          width: 400,
          left: 50,
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          top: 20,
          right: 10,
          data: [
            {
              name: '企业总数',
              icon:
                'image://'
            },
            {
              name: '月活数',
              icon:
                'image://'
            }
          ],
          textStyle: {
            color: '#fff',
            fontSize: 15
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          data: this.monthDate
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '企业总数',
            type: 'line',
            lineStyle: {
              color: '#1afa29'
            },
            data: this.compData
          },
          {
            name: '月活数',
            type: 'line',
            lineStyle: {
              color: '#1296db'
            },
            data: this.monthActive
          }
        ]
      });
    }
  },
  mounted () {
    // Promise.all([selectmonthactive(), monthcensus()]).then(data => {
    //   console.log(data);
    //   data[1].data.map(item => {
    //     this.monthDate.push(item.monthDate);
    //     this.compData.push(item.totalCount);
    //     let obj = data[0].data.find(val => val.activeDate === item.monthDate);
    //     if (obj) {
    //       this.monthActive.push(obj.monthActiveCount);
    //     } else {
    //       this.monthActive.push(null);
    //     }
    //     console.log(this.monthDate, this.monthActive, this.compData);

    //   });
    // });
    this.drawLine();
  }
};
</script>

<style scoped>
#monthStatistics {
    width: 500px;
    height: 242px;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/month.png') no-repeat;
    background-size: cover;
}
</style>